import React, { useEffect, useState } from 'react'
import { StarO } from '@react-vant/icons';
import { Tabs } from 'react-vant';
import { ProductCard, Tag, Button } from 'react-vant';
import { useLocation, useParams, useNavigate } from 'react-router-dom';
import { Toast, NavBar } from 'react-vant';
import {useDispatch,useSelector} from 'react-redux'
import axios from '../../../ulist/index'
import '../../../api/index'
interface DETLISY {
  user?: string,
  id?: string,
  img?: string,
  title?: string
}
export default function Toplist() {
  const [slit, setslist] = useState<DETLISY>({})
  const location = useLocation()
  const navigate = useNavigate()
  const dispatch = useDispatch()

  useEffect(() => {
    setslist(location.state as DETLISY)
  }, [])
  useEffect(() => {
    console.log(slit, '2222');

  }, [slit])

  useEffect(()=>{
    axios.get('/api/list').then(res=>{

    })
  },[])

  return (
    <div>
      <NavBar
        title="标题"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />
      {/* 获取到数据以后直接渲染 */}
      <ProductCard
        num={slit.id}
        price="2.00"
        desc={slit.user}
        title={slit.title}
        thumb={slit.img}
        footer={
          <>
           
            <Button size="mini" round plain>
            <StarO  />收藏
            </Button>
          </>
        }
      />
      <Button className='burro' type="info">开始游戏</Button>

      <div className="demo-tabs">
    <Tabs active={0}>
    <div className="demo-tabs">
    <Tabs active={0}>
      {[1, 2, 3].map((item) => (
        <Tabs.TabPane key={item} title={`标签${item}`}>
          基督教的基督教基督教基督教拉动房价多少快乐JFK拉德斯基机开绿灯飞机啊快点交房 {item}
        </Tabs.TabPane>
      ))}
    </Tabs>
    </div>
    </Tabs>
    </div>


    </div>
  )
}
